<template>
  <div class="institutions-jobs-area">
    <el-col :span="5" style="padding-right: 20px">
      <tree-page></tree-page>
    </el-col>
    <el-card>
      <template #header>
        <div class="header">
          <h4>作业范围</h4>
          <el-button type="primary">编辑</el-button>
        </div>
      </template>
      <div class="search">
        地区关键词：
        <el-input placeholder="请输入地区关键词" v-model="center" />
      </div>
      <template>
        <baidu-map class="map" :center="center" :zoom="15" scroll-wheel-zoom>
          <bm-polygon
            :path="polygonPath"
            stroke-color="blue"
            :stroke-opacity="0.5"
            :stroke-weight="2"
            :editing="true"
            @lineupdate="updatePolygonPath"
          />
        </baidu-map>
      </template>
    </el-card>
  </div>
</template>

<script>
import treePage from "@/components/tree-page.vue";
export default {
  components: { treePage },
  data() {
    return {
      center: "北京",
      polygonPath: [
        { lng: 116.412732, lat: 39.911707 },
        { lng: 116.39455, lat: 39.910932 },
        { lng: 116.403461, lat: 39.921336 },
      ],
    };
  },
  methods: {
    updatePolygonPath(e) {
      this.polygonPath = e.target.getPath();
    },
    addPolygonPoint() {
      this.polygonPath.push({ lng: 116.404, lat: 39.915 });
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  .el-button {
    margin-top: -8px;
  }
}
.search {
  display: flex;
  align-items: center;

  .el-input {
    width: 230px;
  }

  ::v-deep .el-input__inner {
    width: 230px;
  }
}
.map {
  width: 100%;
  height: 400px;
  padding-top: 20px;
}
</style>
